import Icon from '@/components/Icon'
import classNames from 'classnames'
import { ReactNode } from 'react'
import { useHistory } from 'react-router'
import styles from './index.module.scss'

type Props = {
  title?: ReactNode
  right?: ReactNode
  onBack?: () => void
  //  插槽标题
  children?: ReactNode
  fixed?: boolean
}

export default function NavBar({
  title,
  right,
  onBack,
  children,
  fixed,
}: Props) {
  const history = useHistory()

  const back = () => {
    if (!onBack) {
      history.go(-1)
    } else {
      onBack()
    }
  }

  return (
    <div className={styles.root}>
      <div className={classNames('main', fixed ? 'fixed' : '')}>
        {/* 后退按钮 */}
        <div className="left" onClick={back}>
          <Icon type="iconfanhui" />
        </div>
        {/* 居中标题 */}
        <div className="title">{children || title}</div>
        {/* 右侧内容 */}
        <div className="right">{right}</div>
      </div>
    </div>
  )
}
